<template>
	<div @drop="setDrop" @dragover="ondragover">
    <el-empty v-if="componentList.length ==0" description="请从左侧列表中选择一个组件, 然后用鼠标拖动组件放置于此处." />

		<grid-layout v-else :margin="[10,10]" v-model:layout="componentList" :col-num="24" :row-height="20" style="width: 100%">
			<template #default="{ gridItemProps }">
				<grid-item
					v-for="(item,index) in componentList"
					:key="item.i"
					v-bind="gridItemProps"
					:x="item.x"
					:y="item.y"
					:w="item.w"
					:h="item.h"
					:i="item.i"
					@resize="setResize"
          @click="setActive(index)"
          class="grid-item"
				>
        <div class="gripper" v-show="componentIndex ===index">
          <el-button type="danger" text @click="deleteDesign">删除</el-button>
          <!-- <el-button type="primary" text>配置</el-button> -->
        </div>
          <component :is="whichCommConfig[item.common]" :key="item.refreshKey"></component>
				</grid-item>
			</template>
		</grid-layout>
	</div>
</template>

<script setup lang="ts">
import { GridLayout, GridItem } from 'vue3-drr-grid-layout'
import 'vue3-drr-grid-layout/dist/style.css'

import { useDesign } from '@/stores/design'

const {setResize,setActive,deleteDesign,setDrop} = useDesign()
const { componentIndex, componentList } = storeToRefs(useDesign())
import whichCommConfig from '../hooks'

const ondragover =(ev)=> {
  ev.preventDefault();
  ev.dataTransfer.dropEffect = "move";
}
</script>

<style scoped>
.gripper {
  position: absolute;
  background: #3d78d924;
  width: 100%;
  height: 100%;
  top: 0;
  text-align: right;
  border-radius: 15px;
  z-index:10;
  padding:20px;
}
</style>
